<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑分类</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <!--引入adminkit模板-->
    <link href="adminkit/css/app.css" rel="stylesheet">
    <style>
        td.details-control {
            background: url('background/plugins/datatables/img/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('background/plugins/datatables/img/details_close.png') no-repeat center center;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body >
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">后台管理</span>
            </a>

            <ul class="sidebar-nav">

                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/dashboard}">
                        <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">首页</span>
                    </a>
                </li>


                <li class="sidebar-item">
                    <a class="sidebar-link" href="/publishedArticleManage">
                        <i class="align-middle" data-feather="book"></i> <span class="align-middle">文章管理</span>
                    </a>
                </li>

                <li class="sidebar-item active">
                    <a class="sidebar-link" href="/kindManage">
                        <i class="align-middle" data-feather="credit-card"></i> <span class="align-middle">分类管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/tagManage">
                        <i class="align-middle" data-feather="tag"></i> <span class="align-middle">标签管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/commentManage}">
                        <i class="align-middle" data-feather="message-square"></i> <span class="align-middle">评论管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/frontInfo">
                        <i class="align-middle" data-feather="airplay"></i> <span class="align-middle">外观管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/statistics}">
                        <i class="align-middle" data-feather="box"></i> <span class="align-middle">统计</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/adminInfo">
                        <i class="align-middle" data-feather="user"></i> <span class="align-middle">个人信息管理</span>
                    </a>
                </li>
            </ul>


        </div>
    </nav>

    <div class="main">
        <!-- top bar navigation -->
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <a href="/" class="btn btn-outline-info" disabled>返回前台首页</a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                                <span class="indicator" >[[${session.unReadCount}]]</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    [[${session.unReadCount}]]条新评论
                                </div>
                            </div>
                            <div class="list-group">
                                <a th:href="@{/commentManage}" class="list-group-item" th:each="comment:${session.unReadComment}">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">[[${comment.name}]]</div>
                                            <div class="text-muted small mt-1">[[${comment.content}]]</div>
                                            <div class="text-muted small mt-1">[[${ #dates.format(comment.time,'yyyy年MM月dd日 ')}]]</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a th:href="@{/commentManage}" class="text-muted">所有评论</a>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown" >
                            <img th:src="${session.admin.img}" class="avatar img-fluid rounded mr-1"  th:alt="${session.admin.name}"/> <span class="text-dark">[[${session.admin.name}]]</span>                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="/logout">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="content-page" style="margin: 0px">

            <!-- Start content -->
            <div class="content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-xl-12">
                            <div class="breadcrumb-holder">
                                <h1 class="main-title float-left">
                                    <i class="fa fa-tasks bigfonts"></i> 分类 &ensp;
                                </h1>
                                <ol class="breadcrumb float-right">
                                    <li class="breadcrumb-item"><a href="/kindManage">全部分类</a></li>
                                    <li class="breadcrumb-item active">编辑分类《[[${kind.name}]]》</li>
                                </ol>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h3> 编辑分类《[[${kind.name}]]》</h3>
                                </div>

                                <div class="card-body">

                                    <div class="form-group row">
                                        <label for="info" class="col-sm-2 col-form-label">分类名称</label>
                                        <input th:value="${kind.name}" type="text" class="form-control col-sm-6" id="name" autocomplete="off">
                                        <input th:value="${kind.id}" type="hidden" id="id">
                                    </div>

                                    <div class="form-group row">
                                        <label for="info" class="col-sm-2 col-form-label">描述信息 </label>
                                        <textarea class="form-control col-sm-6" id="info" style="height: 150px">[[${kind.introduce}]]</textarea>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label">封面</label>
                                        <div class="col-sm-4">
                                            <img th:if="${kind.img != null}" th:src="${kind.img}" class="img-thumbnail" id="img_head" style="width: 200px;height:100px " alt="">
                                            <img th:if="${kind.img == null}" class="img-thumbnail" id="img_head" style="width: 200px;height:100px " alt="">
                                        </div>
                                        <div class="col-sm-4">
                                            <button class="btn btn-info" style="margin-bottom: 5px;"
                                                    id="uploadCoverImg">
                                                <i class="fa fa-picture-o"></i>&nbsp;上传封面
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" onclick="updateKind()" class="btn btn-primary"><i class="fa fa-save"></i> 更新</button>
                                    <a th:href="@{/kindManage}" class="btn btn-success"><i class="fa fa-react"></i> 返回</a>
                                </div>
                            </div><!-- end card-->
                        </div>

                    </div>

                </div>
                <!-- END container-fluid -->

            </div>
            <!-- END content -->

        </div>
        <!-- END content-page -->

        <!--    <div th:replace="common/bar::#footer"></div>-->

    </div>

</div>
<!-- END main -->
<!--引入adminkit模板-->
<script src="adminkit/js/app.js"></script>

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>
<script src="common/js/jquery.dataTables.min.js"></script>
<script src="common/js/dataTables.bootstrap4.min.js"></script>
<script src="common/js/public.js"></script>
<script src="background/ajaxupload/ajaxupload.js"></script>

<script>
    //解决下拉菜单不显示
    $(function () {
        $('.dropdown-toggle').dropdown();
    })
var obj=document.getElementById("id");
var obj2=document.getElementById("img_head");
var Id=obj.getAttribute("value");
var src=obj2.getAttribute("src");
console.log(src);
$(function (){
    new AjaxUpload('#uploadCoverImg', {
        action: '/admin/image/uploads',
        name: 'image',
        autoSubmit: true,
        responseType: "json",
        onSubmit: function (file, extension) {
            if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                alert('只支持jpg、png、gif格式的文件！');
                return false;
            }
        },
        onComplete: function (file, r) {
            if (r != null && r.code == 200) {
                $("#img_head").attr("src", r.data);
                // window.console.log(r.data);
                // window.console.log($("#articleCoverImg").attr("src"));
                src=r.data;
                $("#img_head").attr("style", "width: 128px;height: 128px;display:block;");
                return false;
            } else {
                alert("error");
            }
        }
    });
});
function updateKind(){
    var id=Id;
    var name=$('#name').val();
    var info=$('#info').val();
    var img=src;
    console.log(img)
    if (isNull(name)) {
        swal("请输入分类名称", {
            icon: "error",
        });
        return;
    }
    if (!validLength(name, 100)) {
        swal("名称过长", {
            icon: "error",
        });
        return;
    }
    if (isNull(info)) {
        swal("请输入简介", {
            icon: "error",
        });
        return;
    }
    if (!validLength(info, 100)) {
        swal("简介过长", {
            icon: "error",
        });
        return;
    }
    if (isNull(src) || src.indexOf('img-upload') != -1) {
        swal("封面图片不能为空", {
            icon: "error",
        });
        return;
    }

    var swlMessage = '保存成功';
    var data={
        "id":id,
        "name":name,
        "introduce":info,
        "img":img
    }
    $.ajax({
        type: 'POST',//方法类型
        url: '/doEditKind',
        contentType: 'application/json',
        data: JSON.stringify(data),
        dataType:"json",
        success: function (result) {
            //if (result.code == 200)
            if (result.code==200) {

                swal({
                    title: swlMessage,
                    type: 'success',
                    showCancelButton: false,
                    confirmButtonColor: '#1baeae',
                    confirmButtonText: '返回',
                    confirmButtonClass: 'btn btn-success',
                    buttonsStyling: false
                }).then(function () {
                    window.location.href = "/kindManage";
                })
            } else {
                swal(result.message, {
                    icon: "error",
                });
            }
            ;
        },
        error: function () {
            swal("操作失败", {
                icon: "error",
            });
        }
    });
}

</script>
<!-- END Java Script for this page -->

</body>
</html>